<template>
  <div class="app-container">
    <el-card class="form-container" shadow="never">
      <el-form
        :model="admin"
        ref="adminForm"
        :rules="rules"
        label-width="150px"
        size="s米糕"
      >
        <el-form-item label="姓名：" prop="tanmaId">
          <el-select
            v-model="admin.tanmaId"
            clearable
            filterable
            placeholder="请选择"
          >
            <el-option-group
              v-for="item in invitationDepartment"
              :key="item.id"
              :label="item.name"
            >
              <el-option
                v-for="user in item.users"
                :key="user.id"
                :label="user.name"
                :value="user.id"
              >
              </el-option>
            </el-option-group>
          </el-select>
          <el-button type="submit" style="margin-left: 4px"  @click="refreshStaff" >刷新人员</el-button>
        </el-form-item>
        <div style="display: flex; align-items: center; justify-content: left">
          <el-form-item label="地区：" prop="areaId">
            <el-select
              v-model="admin.areaId"
              filterable
              placeholder="省份"
              @change="submitAreaChange"
            >
              <el-option
                v-for="item in areas"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item
            label-width="auto"
            style="margin-left: 15px"
            prop="cityId"
          >
            <el-select v-model="admin.cityId" filterable placeholder="市区">
              <el-option
                v-for="item in urbanList2"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              >
              </el-option>
            </el-select>
          </el-form-item>
        </div>

        <el-form-item label="新人： " prop="newPeople">
          <el-radio-group v-model="admin.newPeople">
            <el-radio :label="1">是</el-radio>
            <el-radio :label="0">否</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="职责：" prop="post">
          <el-radio-group v-model="admin.post">
            <el-radio :label="0">前道</el-radio>
            <el-radio :label="1">后道</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item label="请假时间：">
          <el-date-picker
            v-model="askForLeave"
            type="datetimerange"
            range-separator="至"
            start-placeholder="开始日期"
            end-placeholder="结束日期"
            align="right"
            :default-time="['9:00:00', '18:00:00']"
          >
            >
          </el-date-picker>
        </el-form-item>

        <el-form-item label="家庭地址：" prop="homeAddress">
          <el-input
            v-model="admin.homeAddress"
            :rows="5"
            style="max-width: 217px"
          ></el-input>
        </el-form-item>

        <el-form-item label="离职：" prop="depart">
          <el-radio-group v-model="admin.depart">
            <el-radio :label="1">否</el-radio>
            <el-radio :label="0">是</el-radio>
          </el-radio-group>
        </el-form-item>
        <el-form-item>
          <el-button @click="dialogVisible = false" size="s米糕"
            >取 消</el-button
          >
          <el-button type="primary" @click="handleDialogConfirm()" size="s米糕"
            >确 定</el-button
          >
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import { mapState } from "vuex";
import rules from "./rules";
import { DEFAULT_ADMIN } from "../../../contanst/data";
import { addStaff, getArea, getUrban } from "../../../api/staff";
import { getObtainStaffStructure, refreshOriginalStructures } from "@/api/assign";
export default {
  name: "addStaff",
  data() {
    return {
      admin: Object.assign({}, DEFAULT_ADMIN),
      rules,
      invitationDepartment: [],
      askForLeave: [],
      urbanList1: [],
      urbanList2: [],
    };
  },

  computed: {
    ...mapState(["areas"]),
  },
  created() {
    getObtainStaffStructure({}, this);
  },

  mounted() {
    this.getAreas();
  },

  methods: {
    getAreas() {
      getArea({
        id: 0,
      }).then((response) => {
        if (response.data && response.data.length) {
          this.$store.commit("SET_AREAS", response.data);
        }
      });
    },

    refreshStaff() {
      refreshOriginalStructures({}, this);
    },

    async edit() {
      this.urbanList2 = await this.getUrbans({ id: this.admin.areaId });
      if (this.admin.cityId === 0) {
        this.admin.cityId = null;
      }
      if (row.leaveStart > 0 && row.leaveEnd > 0) {
        this.askForLeave = [row.leaveStart * 1000, row.leaveEnd * 1000];
      } else {
        this.askForLeave = null;
      }
    },

    async submitAreaChange(val) {
      if (val) {
        const data = await this.getUrbans({ id: val });
        this.urbanList2 = data;
        this.admin.cityId = data[0].id;
      } else {
        this.urbanList2 = [];
        this.admin.cityId = null;
      }
    },
    // 获取市区
    async getUrbans(params) {
      const res = await getUrban(params);
      return res.data || [];
    },

    handleDialogConfirm() {
      this.$confirm("是否要确认?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        this.$refs["adminForm"].validate((valid) => {
          if (!valid) {
            return false;
          }
          this.admin.leaveStart = this.askForLeave
            ? new Date(this.askForLeave[0]).getTime()
            : 0;
          this.admin.leaveEnd = this.askForLeave
            ? new Date(this.askForLeave[1]).getTime()
            : 0;
          addStaff(this.admin).then((response) => {
            this.$message({
              message: "修改成功！",
              type: "success",
            });
            setTimeout(() => {
              this.$router.push({ path: "/staff/staffList" });
            }, 1000);
          });
        });
      });
    },
  },
};
</script>

<style></style>
